// import React from "react";
import { useDispatch } from "react-redux";
import { setUser } from "@/store/Redux_login";
import "./Login.css";
import { Form, Button, message } from "antd";
import { useNavigate } from "react-router-dom";
export const Login = () => {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const onFinish = (values) => {
    dispatch(setUser(values)); // 存储到redux

    localStorage.setItem("user", JSON.stringify(values)); //存储到本地
    navigate("/Homepage");
    message.success("登录成功~(≧∇≦) "); //弹窗
    console.log(values);
  };

  return (
    <div className="login-container">
      <div className="login-form">
        <h1>
          <b style={{ color: "red" }}>L</b>o<b style={{ color: "red" }}>g</b>in
        </h1>
        <Form validateTrigger="onBlur" onFinish={onFinish}>
          <Form.Item
            name="MobilePhoenNumber"
            rules={[
              //设置逻辑
              {
                required: true,
                message: "请输入手机号",
              },
              {
                pattern: /^1[3-9]\d{9}$/,
                message: "请输入正确的手机号",
              },
            ]}
          >
            <input type="text" />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: "请输入密码",
              },
            ]}
          >
            <input type="password" />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              Login
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};
